<template>
	<div id="map"></div>
</template>

<script>
	import 'ol/ol.css'
	import createWMTSMap from '@/utils/map/createMap'
	import { Vector as VectorLayer } from 'ol/layer'
	import { Vector as VectorSource } from 'ol/source'
	import Feature from 'ol/Feature'
	// 引入几何(点线面...)
	import { Point, LineString, Polygon } from 'ol/geom'
	// 经纬度转换为球面坐标系坐标
	import { fromLonLat } from 'ol/proj'
	// 设置特征样式
	import { Fill, Circle, Style, Icon } from 'ol/style'
	import mouseListener from '@/utils/map/mouseListener'
	import { getCurrentInstance } from 'vue'
	export default {
		name: 'TyphoonPath',
		data() {
			return {
				map: null,
				lastShowSolar: null,
				lastIcon: null,
				lastZoomPoint: null
			}
		},
		methods: {
			// 创建地图
			createMap(index, key) {
				const { creatMap } = createWMTSMap()
				let map = creatMap(index, key)
				this.map = map
			},
			// 使用定时器绘制台风路径，有动画的效果
			async drawTyphoonPathIntervals() {
				const { proxy } = getCurrentInstance()
				const { data } = await proxy.$api.getTyphoonData()
				let points = data.points
				let index = 0
				let layer = new VectorLayer()
				let source = new VectorSource()
				layer.setSource(source)
				let intervalLogo = setInterval(() => {
					if (index == points.length) {
						clearInterval(intervalLogo)
						return
					}
					let position = [points[index].lng, points[index].lat]
					// 点的数据源设置
					let featurePoint = new Feature({
						geometry: new Point(fromLonLat(position))
					})
					featurePoint.setStyle(
						new Style({
							image: new Circle({
								fill: new Fill({
									color: this.judgeColorByWindLevel(points[index].strong)
								}),
								radius: 4
							})
						})
					)
					featurePoint.set('typhoonPoint', true)
					// 风圈图片
					if (index <= points.length - 2) {
						let featureIcon = this.addIcon(points[index])
						let lastIcon = this.lastIcon
						if (lastIcon != null) {
							source.removeFeature(lastIcon)
						}
						this.lastIcon = featureIcon
						source.addFeature(featureIcon)
					}
					// 按照特征点的风力让台风风圈单独显示
					if (points[index].radius7.length != 0 || points[index].radius7 != null) {
						let featureSolar = this.drawSolar(points[index])
						let lastShowSolar = this.lastShowSolar
						if (lastShowSolar != null) {
							source.removeFeature(lastShowSolar)
						}
						this.lastShowSolar = featureSolar
						source.addFeature(featureSolar)
					}

					source.addFeature(featurePoint)
					// 线 数据源设置
					if (index > 0) {
						let nextPosition = [points[index - 1].lng, points[index - 1].lat]
						let featureLine = new Feature({
							geometry: new LineString([fromLonLat(position), fromLonLat(nextPosition)])
						})
						featureLine.set('typhoonLine', true)
						source.addFeature(featureLine)
					}
					index++
				}, 50)
				this.map.addLayer(layer)
			},
			/**
			 * 根据台风等级判断特征点颜色
			 * @param {String} windlevel 台风等级描述
			 * @return {String} map[windlevel] color name
			 */
			judgeColorByWindLevel(windlevel) {
				let map = {
					热带风暴: 'red',
					热带低压: 'blue',
					强热带风暴: 'purple',
					台风: 'orange',
					强台风: 'yellow',
					超强台风: 'salmon'
				}
				return map[windlevel]
			},
			// drawSolar 绘制风圈
			/**
			 * 应该是明确的只让他返回 一个 feature
			 */
			drawSolar(points) {
				let radiusArr = points.radius7.split('|').map((item) => {
					return parseFloat(item)
				})
				// 定义中心点、多边形半径
				var Configs = {
					CIRCLE_CENTER_X: parseFloat(points.lng),
					CIRCLE_CENTER_Y: parseFloat(points.lat),
					CIRCLE_R: {
						SE: radiusArr[0] / 100,
						NE: radiusArr[1] / 100,
						NW: radiusArr[2] / 100,
						SW: radiusArr[3] / 100
					}
				}
				let positions = []
				var _interval = 6
				for (var i = 0; i < 360 / _interval; i++) {
					var _r = 0
					var _ang = i * _interval
					if (_ang > 0 && _ang <= 90) {
						_r = Configs.CIRCLE_R.NE
					} else if (_ang > 90 && _ang <= 180) {
						_r = Configs.CIRCLE_R.NW
					} else if (_ang > 180 && _ang <= 270) {
						_r = Configs.CIRCLE_R.SW
					} else {
						_r = Configs.CIRCLE_R.SE
					}

					var x = Configs.CIRCLE_CENTER_X + _r * Math.cos((_ang * 3.14) / 180)
					var y = Configs.CIRCLE_CENTER_Y + _r * Math.sin((_ang * 3.14) / 180)
					positions.push(fromLonLat([x, y]))
				}
				let feature = new Feature({
					geometry: new Polygon([positions])
				})
				feature.set('typhoonSolar', true)
				return feature
			},
			/**
			 * 创建风圈图标
			 */
			addIcon(points) {
				let featureIcon = new Feature({
					geometry: new Point(fromLonLat([points.lng, points.lat]))
				})
				featureIcon.setStyle(
					new Style({
						image: new Icon({
							src: 'data/typhoon.png',
							scale: 0.5
						})
					})
				)
				return featureIcon
			},
			// 注册一个 hover事件
			handleHoverOnMap() {
				this.map.on('pointermove', (ev) => {
					let pixel = ev.pixel
					let feature = this.map.forEachFeatureAtPixel(pixel, (feature) => {
						return feature
					})
					if (feature) {
						let execName = mouseListener.typeJudge(feature) + 'Hover'
						console.log('VUE中的this', this)
						mouseListener[execName].apply(this, [feature])
					} else {
						this.handleDeletePointZoom()
						this.map.getTargetElement().style.cursor = ''
					}
				})
			},
			// 点击事件
			handleClickOnMap() {
				this.map.on('click', (ev) => {
					let pixel = ev.pixel
					let feature = this.map.forEachFeatureAtPixel(pixel, (feature) => {
						return feature
					})
					if (feature) {
						if (feature.get('typhoonPoint')) {
							let handleName = mouseListener.typeJudge(feature) + 'Click'
							// console.log(this)
							mouseListener[handleName].apply(this, [feature])
						} else {
							console.log('no Feature!!')
						}
					}
				})
			},
			// 清除上一个监听的特征点 clearPoint Zoom Style
			handleDeletePointZoom() {
				if (this.lastZoomPoint != null) {
					this.lastZoomPoint.getStyle().getImage().setRadius(4)
					this.lastZoomPoint.changed()
				}
			}
		},
		mounted() {
			this.createMap(2, '40e50cca6823476482e8721bb2eee900')
			this.drawTyphoonPathIntervals()
			this.handleHoverOnMap()
			this.handleClickOnMap()
		}
	}
</script>

<style>
	#map {
		width: 100%;
		height: 100%;
	}
</style>
